<template>
	<view class="content reg-page">
		<view class="input-group">
			<view class="input-row border-bottom-1px">
				<text class="title">
					<text class="yzb yzb-bitian" />
					是否就职
				</text>
				<radio-group @change="radioChange" v-model="cardInfo.ifEmployed">
					<label class="radio">
						<radio :value="'1'" :checked="cardInfo.ifEmployed == '1'" />
						是
					</label>
					<label class="radio">
						<radio :value="'0'" :checked="cardInfo.ifEmployed == '0'" />
						否
					</label>
				</radio-group>
			</view>

			<view class="input-column border-bottom-1px">
				<text class="title">
					<text class="yzb yzb-bitian" />
					姓名
				</text>
				<view class="input-item">
					<m-input type="text" v-model="cardInfo.name" placeholder="请输入姓名" :maxLength="30"></m-input>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">
					<text class="yzb yzb-bitian" />
					联系方式
				</text>
				<view class="input-item">
					<m-input type="text" v-model="cardInfo.phone" placeholder="请输入联系方式" :maxLength="30"></m-input>
				</view>
			</view>
			<template v-if="cardInfo.ifEmployed==1">
				<view class="input-column border-bottom-1px">
					<text class="title">
						<text class="yzb yzb-bitian" />
						职务
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.postName" placeholder="请输入职务" :maxLength="50"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<text class="yzb yzb-bitian" />
						公司
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.companyName" placeholder="请输入公司名称"
							:maxLength="100"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<!-- <text class="yzb yzb-bitian" /> -->
						行业领域
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.industry" placeholder="请输入行业领域"
							:maxLength="100"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<!-- <text class="yzb yzb-bitian" /> -->
						主营业务
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.mainBusiness" placeholder="请输入主营业务"
							:maxLength="200"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<!-- <text class="yzb yzb-bitian" /> -->
						愿景
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.vision" placeholder="请输入愿景" :maxLength="200"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<!-- <text class="yzb yzb-bitian" /> -->
						人生格言
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.motto" placeholder="请输入人生格言" :maxLength="20"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<!-- <text class="yzb yzb-bitian" /> -->
						近期重点工作
					</text>
					<view class="input-item">
						<textarea :style="{height:'200upx'}" maxlength="200"
							placeholder-style="color:rgba(153,153,153,1);" v-model="cardInfo.recentWork"
							placeholder="请输入近期重点工作" />
					</view>
				</view>
			</template>
			<template v-else>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<text class="yzb yzb-bitian" />
						学校
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.school" placeholder="请输入学校" :maxLength="30"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<text class="yzb yzb-bitian" />
						专业
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.major" placeholder="请输入专业" :maxLength="50"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<!-- <text class="yzb yzb-bitian" /> -->
						兴趣
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.interest" placeholder="请输入兴趣" :maxLength="100"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						<!-- <text class="yzb yzb-bitian" /> -->
						成果
					</text>
					<view class="input-item">
						<textarea :style="{height:'200upx'}" maxlength="200"
							placeholder-style="color:rgba(153,153,153,1);" v-model="cardInfo.achievement"
							placeholder="请输入成果" />
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						人生格言
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.motto" placeholder="请输入人生格言" :maxLength="20"></m-input>
					</view>
				</view>
				<view class="input-column border-bottom-1px">
					<text class="title">
						近期钻研方向
					</text>
					<view class="input-item">
						<m-input type="text" v-model="cardInfo.recentResearch" placeholder="请输入近期钻研方向"
							:maxLength="30"></m-input>
					</view>
				</view>
			</template>
		</view>
		<view class="btn-row row">
			<button type="primary" class="btn-save width-90" @tap="update">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import mInput from '@/components/m-input/m-input.vue';
	import graceChecker from '@/common/graceChecker.js';
	import formRuleConfig from '@/config/formRule.config.js';
	export default {
		components: {
			mInput,
		},
		computed: {
			...mapState(['userInfo']),
		},

		data() {
			return {
				id: '',
				cardInfo: {
					ifEmployed: null,
					name: '',
					postName: '',
					companyName: '',
					industry: '',
					mainBusiness: '',
					vision: '',
					phone: '',
					motto: '',
					recentWork: '',
					school: '',
					major: '',
					interest: '',
					achievement: '',
					recentResearch: '',
				},
			};
		},
		onLoad() {
			this.cardInfo.name = this.userInfo.realname;
			this.cardInfo.phone = this.userInfo.phone;
			this.getCardDetail();
		},
		methods: {
			async getCardDetail() {
				let re = await this.$apis.getCardDetail();
				if (re != true) {
					console.log("re===", re);
					re.ifEmployed=re.ifEmployed+"";
					this.cardInfo = re;
					this.id = re.id;
				}
			},

			radioChange(val) {
				this.cardInfo.ifEmployed = val.detail.value;
				console.log('radioChange', val);
				this.$forceUpdate();
			},

			// 更新
			async update() {
				console.log("this.cardInfo===", this.cardInfo)
				let checkRes = false;
				if (this.cardInfo.ifEmployed == 1) {
					checkRes = graceChecker.check(this.cardInfo, formRuleConfig.addCardRule);
				} else {
					checkRes = graceChecker.check(this.cardInfo, formRuleConfig.addCardRule1);
				}
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: 'none'
					});
					return;
				}
				let res = await this.$apis.addOrUpdateCard(this.cardInfo);
				if (res) {
					setTimeout(() => {
						uni.navigateBack(-1);
					}, 1000);
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.yzb-bitian {
		color: $font-color-red;
	}

	.input-group {
		border-radius: 10upx;
		margin-top: 10upx;
		display: flex;
		flex-direction: column;
		padding-bottom: 130upx;
	}

	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
		background: #fff;
		justify-content: space-between;
		align-items: center;
		padding: 15upx 10upx;
	}

	.input-row .title {
		width: 25%;
		padding: 20upx 0;
		padding-left: 20upx;
		line-height: 50upx;
		color: $font-color-333;
	}

	.border-bottom-1px {
		// border-bottom: 1upx solid $border-color-light;
		position: relative;

		&::after {
			position: absolute;
			z-index: 1;
			right: 20upx;
			bottom: 0;
			left: 20upx;
			height: 1upx;
			content: '';
			// -webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: #e2e2e2;
		}
	}

	.header {
		display: flex;
		flex-direction: column;

		.tip {
			font-size: $uni-font-size-sm;
			color: $font-color-666;
			margin-left: 20upx;
		}
	}

	.head-img {
		margin-right: 15upx;

		image {
			width: 160upx;
			height: 160upx;
			border-radius: 50%;
		}
	}

	radio-group {
		margin-right: 10upx;
	}

	.radio {
		margin-left: 20upx;
	}

	.input-column {
		display: flex;
		flex-direction: column;
		background-color: $bgcolor_white;
		padding: 30upx 20upx 10upx 20upx;

		.title {
			margin-left: 10upx;
			color: $font-color-333;
		}

		.input-item {
			// display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.picker {
			padding: 30upx 0 20upx 0;
			margin-left: 10upx;
			position: relative;

			picker {
				font-size: $uni-font-size-lg;
				width: 100%;
				position: absolute;
			}
		}

		.yzb-next {
			float: right;
			color: $font-color-999;
		}
	}

	.content {
		background: $bgcolor_white;
	}

	.btn-row {
		position: fixed;
		z-index: 999;
		bottom: 0upx;
		padding: 20upx;
		background-color: #ffffff;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;

		.btn-delete {
			background-color: $bg-grey;
			height: 80upx;
			line-height: 80upx;
			margin-right: 20upx;
			font-size: $font-size-34;
			color: $font-color-333;
			width: 30%;
		}

		.btn-save {
			background-color: $main-color;
			height: 80upx;
			line-height: 80upx;
			font-size: $font-size-34;
		}

		.width-55 {
			width: 55%;
		}

		.width-90 {
			width: 90%;
		}
	}

	textarea {
		/* height: 200upx; */
		width: 100%;
		border: 1upx solid #eee;
		border-radius: 10upx;
		padding: 10upx;
		box-sizing: border-box;
	}
</style>